<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 当前选中的菜单项
const activeIndex = ref('1')

// 菜单项点击处理
const handleSelect = (key) => {
  switch (key) {
    case '1':
      router.push('/learning/courses')
      break
    case '2':
      router.push('/learning/my-courses')
      break
    case '3':
      router.push('/learning/favorites')
      break
    case '4':
      router.push('/learning/history')
      break
  }
}
</script>

<template>
  <div class="learning-nav-menu">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical"
      @select="handleSelect"
    >
      <el-menu-item index="1">
        <el-icon><document /></el-icon>
        <span>全部课程</span>
      </el-menu-item>
      
      <el-menu-item index="2">
        <el-icon><collection /></el-icon>
        <span>我的课程</span>
      </el-menu-item>
      
      <el-menu-item index="3">
        <el-icon><star /></el-icon>
        <span>我的收藏</span>
      </el-menu-item>
      
      <el-menu-item index="4">
        <el-icon><time /></el-icon>
        <span>学习历史</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
.learning-nav-menu {
  width: 200px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-menu-vertical {
  border-right: none;
}

.el-menu-item {
  height: 50px;
  line-height: 50px;
}

.el-menu-item .el-icon {
  margin-right: 8px;
}
</style> 